<template>
  <custom-layout :isTabBar="false" navTitle="添加用户">
    <view class="update">
      <view class="form-card">
        <uni-forms ref="valiForm" :modelValue="model" :rules="rules" label-position="top">
          <uni-forms-item name="userName" label="用户名称">
            <uni-easyinput type="text" v-model="model.userName" placeholder="请输入用户名称" />
          </uni-forms-item>
          <uni-forms-item name="nickName" label="用户昵称">
            <uni-easyinput type="text" v-model="model.nickName" placeholder="请输入用户昵称" />
          </uni-forms-item>
          <uni-forms-item name="phoneNumber" label="手机号">
            <uni-easyinput type="text" v-model="model.phoneNumber" placeholder="请输入手机号" />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="handleSubmit('valiForm')">提交</button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { addUser } from "@/api/system/user";
export default {
  data() {
    return {
      model: {
        userName: "",
        password: "",
      },
      rules: {
        userName: {
          rules: [{ required: true, errorMessage: "请输入用户名称" }],
        },
        nickName: {
          rules: [{ required: true, errorMessage: "请输入用户昵称" }],
        },
      },
    };
  },
  onLoad() {},
  mounted() {},
  methods: {
    async handleSubmit(refName) {
      const values = await this.$refs[refName].validate();
      this.$message.loading("提交中...", 0);
      await addUser(values);
      setTimeout(() => {
        this.$tab.navigateBack();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.update {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px;
}
</style>
